import React, { useState } from 'react';
import styles from '../video/VideoTemplateGallery.module.css';

// 定义视频模板项接口
interface TemplateItem {
  id: string;
  title: string; // 模板标题
  subtitle?: string; // 英文副标题
  thumbnail: string; // 视频缩略图/视频URL
  count: number; // 作品数量
  description?: string; // 视频描述（可选）
}

// 定义视频模板画廊组件属性接口
interface VideoTemplateGalleryProps {
  title?: string; // 主标题
  subtitle?: string; // 副标题
  navItems: string[]; // 导航项数组
  featuredTemplate: TemplateItem; // 左侧大图模板
  rightTopTemplate: TemplateItem; // 右上模板
  rightBottomTemplate: TemplateItem; // 右下模板
}

/**
 * 视频模板画廊组件
 * 包含标题区、导航区和三个视频模板展示区（左侧大图，右上和右下小图）
 * 支持视频播放功能
 */
const VideoTemplateGallery: React.FC<VideoTemplateGalleryProps> = ({
  title = "行业趋势—视频篇",
  subtitle = "精选热点专题实时更新,热门素材轻松get~",
  navItems = [],
  featuredTemplate,
  rightTopTemplate,
  rightBottomTemplate
}) => {
  // 当前播放的视频ID状态
  const [playingVideoId, setPlayingVideoId] = useState<string | null>(null);
  // 存储视频元素的引用
  const videoRefs = React.useRef<{[key: string]: HTMLVideoElement | null}>({});

  /**
   * 处理鼠标移入视频区域
   * @param videoId 视频ID
   */
  const handleMouseEnter = (videoId: string) => {
    setPlayingVideoId(videoId);
    const video = videoRefs.current[videoId];
    if (video) {
      video.play().catch(error => {
        console.error('自动播放失败:', error);
      });
    }
  };

  /**
   * 处理鼠标移出视频区域
   * @param videoId 视频ID
   */
  const handleMouseLeave = (videoId: string) => {
    const video = videoRefs.current[videoId];
    if (video) {
      video.pause();
      video.currentTime = 0; // 重置播放进度
    }
    setPlayingVideoId(null);
  };

  /**
   * 渲染视频播放器
   * @param template 模板数据
   * @param isLarge 是否为大尺寸视频
   */
  const renderVideoPlayer = (template: TemplateItem, isLarge: boolean = false) => {
    return (
      <div 
        className={`${styles.videoContainer} ${isLarge ? styles.largeVideo : ''}`}
        onMouseEnter={() => handleMouseEnter(template.id)}
        onMouseLeave={() => handleMouseLeave(template.id)}
      >
        <video
          ref={el => videoRefs.current[template.id] = el}
          src={template.thumbnail}
          muted // 静音以避免自动播放限制
          loop // 循环播放
          controls={playingVideoId === template.id} // 只在播放时显示控制条
          className={styles.videoPlayer}
          poster={template.thumbnail}
          preload="auto" // 预加载视频
        />
        {/* 视频未播放时的遮罩层 */}
        {playingVideoId !== template.id && (
          <div className={styles.videoPlaceholder}>
            <div className={styles.playIcon}>▶</div>
          </div>
        )}
      </div>
    );
  };

  return (
    <div className={styles.container}>
      {/* 标题区域 */}
      <div className={styles.header}>
        <h2 className={styles.title}>{title}</h2>
        <p className={styles.subtitle}>{subtitle}</p>
      </div>

      {/* 导航栏 */}
      <nav className={styles.navBar}>
        <ul className={styles.navList}>
          {navItems.map((item) => (
            <li key={item} className={styles.navItem}>
              {item}
            </li>
          ))}
        </ul>
      </nav>

      {/* 主体内容 */}
      <div className={styles.content}>
        {/* 左侧大图模板 */}
        <div className={styles.leftTemplate}>
          {/* 视频播放器 */}
          {renderVideoPlayer(featuredTemplate, true)}
          
          <div className={styles.templateInfo}>
            <h3>{featuredTemplate.title}</h3>
            {/* 英文副标题 */}
            {featuredTemplate.subtitle && (
              <p className={styles.englishSubtitle}>{featuredTemplate.subtitle}</p>
            )}
            {/* 视频描述（如果有） */}
            {featuredTemplate.description && (
              <p className={styles.description}>{featuredTemplate.description}</p>
            )}
            <span className={styles.count1}>共{featuredTemplate.count}个作品&gt;</span>
          </div>
        </div>

        {/* 右侧模板区域 */}
        <div className={styles.rightTemplates}>
          {/* 右上模板 */}
          <div className={styles.rightTopTemplate}>
            {/* 视频播放器 */}
            {renderVideoPlayer(rightTopTemplate)}
            
            <div className={styles.templateInfo}>
              <h4>{rightTopTemplate.title}</h4>
              <span className={styles.count}>共{rightTopTemplate.count}个作品&gt;</span>
            </div>
          </div>

          {/* 右下模板 */}
          <div className={styles.rightBottomTemplate}>
            {/* 视频播放器 */}
            {renderVideoPlayer(rightBottomTemplate)}
            
            <div className={styles.templateInfo}>
              <h4>{rightBottomTemplate.title}</h4>
              <span className={styles.count}>共{rightBottomTemplate.count}个作品&gt;</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VideoTemplateGallery;